<template>
  <video class="video" id="player" autoplay></video>
</template>
<script setup lang="ts" name="">
import { ref, onMounted } from "vue";
import Plyr from "plyr";
import { toast } from "vue3-toastify";
import "plyr/dist/plyr.css";



interface VideoData {
  title: string;
  time: string;
  videoUrl: String;
}
interface Props {
  videoData: VideoData[];   //视频数组
  poster: string;           //视频海报    
  defSets?:number;          //默认播放的视频
}
 
const emits = defineEmits<{
  (event:"changeSets",sets:number):void
}>()
const { videoData, poster ,defSets} = withDefaults(defineProps<Props>(), {
  videoData: () => [],
  poster: "",
  defSets:0
});

const setsNow = ref<number>(defSets); //第几集

const video = ref<HTMLElement | null>(null);
var player: Plyr | null = null;
onMounted(() => {
  player = new Plyr("#player", {
    i18n: {
      speed: "速度",
      normal: "正常",
    },
  });

  player.source = {
    type: "video",
    sources: [
      { src: videoData[setsNow.value].videoUrl as string, type: "video/mp4" },
    ],
  };
  player.poster = poster;
  player.on("ended", () => {
    if (setsNow.value === videoData.length - 1)
      return toast.info(`已经是最后一集了`);
      emits("changeSets",setsNow.value + 1)
      changSets(setsNow.value + 1);
  });
});

const changSets = (setsNum: number) => {
  // if(setsNow.value === setsNum) return ;
  setsNow.value = setsNum;
  if (player) {
    player.source = {
      type: "video",
      sources: [
        { src: videoData[setsNow.value].videoUrl as string, type: "video/mp4" },
      ],
    };
  }
};

defineExpose({changSets});


</script>
<style scoped lang="scss">
// @import "./index.scss";
</style>
